<template>
  <div class="h-100">
    <device-list
      v-show="!showPortDetail"
      ref="deviceList"
      @viewPortDetail="viewPortDetail"
    />
    <port-detail
      v-if="showPortDetail"
      :model-list="modelList"
      :device-type-list="deviceTypeList"
      :row-data="rowData"
      @goBack="showDeviceList"
    />
  </div>
</template>

<script>
  import DeviceList from './components/DeviceList'
  import PortDetail from './components/PortDetail'
  import { deepClone } from '@/utils/common'

  export default {
    components: {
      DeviceList,
      PortDetail
    },
    data() {
      return {
        showPortDetail: false,
        showInfo: false,
        rowData: {},
        modelList: [],
        deviceTypeList: []
      }
    },
    methods: {
      showDeviceList() {
        this.showPortDetail = false
        this.$refs.deviceList.doLayout()
      },
      // 查看端口详情
      viewPortDetail(data) {
        const rowData = deepClone(data)
        console.log('this.rowData', rowData)
        rowData.model = rowData.model || ''
        rowData.realModel = ''
        const model = rowData.model
        if (model.includes(12)) {
          rowData.realModel = 12
        }
        if (model.includes(24)) {
          rowData.realModel = 24
        }
        if (model.includes(48)) {
          rowData.realModel = 48
        }
        if (model.includes(96)) {
          rowData.realModel = 96
        }
        if (model.includes(144)) {
          rowData.realModel = 144
        }
        if (model.includes(192)) {
          rowData.realModel = 192
        }
        if (model.includes(384)) {
          rowData.realModel = 384
        }
        this.rowData = rowData
        this.modelList = this.$refs.deviceList.modelList
        this.deviceTypeList = this.$refs.deviceList.deviceType
        this.showPortDetail = true
      }
    }
  }
</script>

<style></style>
